<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
<canvas id="myCanvas" width="360" height="650"></canvas>
</template>

<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();

/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};
	
export default { 
	data() {
		return {
		}
	},
	onLoad() {
	}, 
	mounted(){
			const canvas = document.getElementById('myCanvas');
			gPaint.isMobile = facecat.isMobileMode();
			let context = canvas.getContext("2d"); //绘图上下文
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			gPaint.canvas = canvas;
			facecat.scaleCanvas(gPaint);
			//注册事件
			facecat.addDefaultEvent(canvas, gPaint);
			//解析加载XML
			let xml = `<?xml version="1.0" encoding="utf-8"?>
			<html xmlns="facecat">
			  <head>
			  </head>
			  <body>
				<div dock="fill" type="tab" selectedindex="0">
				  <div name="TabPage" text="可视化生成" type="tabpage">
					<div type="tab" name="TabView" text="TabView" location="27,18" size="397,268" selectedindex="0">
					  <div name="TabPage3" text="TabPage3" type="tabpage">
						<input type="button" name="Button" text="Button" location="27,47" size="100,20" />
						<input type="button" name="Button2" text="Button2" location="27,103" size="100,20" />
					  </div>
					  <div name="TabPage4" text="TabPage4" type="tabpage">
						<table name="Grid" text="Grid" location="22,22" size="200,200">
						  <tr>
							<th name="FCGridColumn" text="FCGridColumn">FCGridColumn</th>
							<th name="FCGridColumn2" text="FCGridColumn2">FCGridColumn2</th>
						  </tr>
						  <tr>
							<td>Cell1</td>
							<td>Cell2</td>
						  </tr>
						</table>
					  </div>
					  <div name="TabPage5" text="TabPage5" type="tabpage" />
					  <div name="TabPage6" text="TabPage6" type="tabpage" />
					  <div name="TabPage7" text="TabPage7" type="tabpage" />
					</div>
				  </div>
				  <div name="TabPage2" text="代码创建" type="tabpage" />
				</div>
			  </body>
			</html>`;
			facecat.renderFaceCat(gPaint, xml);
			//获取第二页
			let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
			let tabView2 = new facecat.FCTabView();
			tabView2.borderColor = "rgb(150,150,150)";
			tabView2.location = new facecat.FCPoint(50, 50);
			tabView2.size = new facecat.FCSize(400, 300);
			facecat.addViewToParent(tabView2, tabPage);
			for (let i = 0; i < 4; i++) {
				let newTabPage = new facecat.FCTabPage();
				newTabPage.borderColor = "rgb(150,150,150)";
				let tabButton = new facecat.FCView();
				tabButton.size = new facecat.FCSize(100, 20);
                tabButton.viewType = "tabbutton";
				tabButton.text = "选项" + i;
				tabButton.backColor = "rgb(255,255,255)";
				tabButton.textColor = "rgb(0,0,0)";
				tabButton.borderColor = "rgb(150,150,150)";
				facecat.addTabPage(tabView2, newTabPage, tabButton);
			}
			facecat.updateTabLayout(tabView2);			},
			methods: {  
	}
}
</script>
